<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-row>
                        <el-form :inline="true" :model="formvo" class="demo-form-inline">
                            <el-form-item label="角色名称">
                                <el-input placeholder="请输入角色名称"></el-input>
                            </el-form-item>
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            <!-- 按钮 -->
                            <el-button
                                style="margin-right: 10px;background-color: #009933;width: 100px;color: white;">查询</el-button>
                            <el-button type="success" style="margin-right: 10px;background-color: #1A87FE;width: 100px;"
                                @click="toadd">+新增</el-button>
                        </el-form>
                    </el-row>
                    <br><br><br><br><br>
                </div>
            </el-col>

        </el-row>

        <!-- 展示列表 -->
        <br><br><br>
        <el-table :data="tableData">
            <el-table-column label="" prop="id" />
            <el-table-column label="角色名称" prop="employeeName" />
            <el-table-column label="角色描述" prop="phone" />
            <el-table-column label="状态" prop="accountNum" />
            <el-table-column label="添加人" prop="password" />
            <el-table-column label="添加时间" prop="createTime" width="180">
                <span>2024-08-23 15:22:10</span>
                <!-- <template slot-scope="scope">
          <span></span>
        </template> -->
            </el-table-column>
            <el-table-column label="操作" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <span style="color: blue;font-size: 13px;" @click="blockup">停用</span>&nbsp;&nbsp;&nbsp;
                    <span style="color: red;font-size: 13px;" @click="delet">删除</span>&nbsp;&nbsp;&nbsp;
                    <span style="color: blue;font-size: 13px;" @click="toadd">编辑</span>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增" :visible.sync="dialogForm">
            <el-form :model="form" label-width="80px">
                <el-form-item label="角色名称" placeholder="请输入">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="form.descs" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="状态" style="text-align: left;">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="启用"></el-radio>
                        <el-radio label="停用"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <hr style="height: 2px;background-color: darkgray;">
                <el-form-item style="text-align: left;">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="APP物业管理" name="type1"></el-checkbox> <br>
                        <el-checkbox label="PC物业平台资源" name="type2"></el-checkbox> <br>
                        <el-checkbox label="小程序物业资源" name="type3"></el-checkbox> <br>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm = false">取 消</el-button>
                <el-button type="primary" @click="dialogForm = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                type: 1,
                type: 2,
                type: 3
            },
            formvo: {},
            dialogForm: false,
            tableData: [{
                employeeName: "顶级员工",
                phone: "顶级物业员工",
                id: 1,
                accountNum: "启用",
                password: "shun(138****9988)",
            },
            {
                employeeName: "楼栋长",
                phone: "小区楼栋长",
                id: 2,
                accountNum: "未启用",
                password: "shun(138****9988)",
            }
            ]
        }
    },

    methods: {
        delet() {
            this.$confirm('是否删除此角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除角色'
                });
            });
        },
        blockup() {
            this.$confirm('是否停用此角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '停用成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消停用角色'
                });
            });
        },
        toadd() {
            this.dialogForm = true
        },
        toRoleList() {
            this.$router.push("rolelist")
        }
    },


    //在实例化之后
    created() {

    },

}
</script>

<style>
.xiaoshou {
    cursor: pointer;
}

/* 半体 */

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    box-shadow: 0 4px 6px rgba(61, 61, 61, 0.1), 0 -4px 6px rgba(61, 61, 61, 0.1),
        -4px 0 6px rgba(61, 61, 61, 0.1), 2px 0 6px rgba(61, 61, 61, 0.1);
}

.bg-purple {
    background: #ffffff;
    height: 540px;
    margin-top: 15px;
}

/* 按钮 */
.el-row {
    display: flex;
    justify-content: flex-start;
}

.el-button+.el-button,
.el-upload+.el-button {
    margin-left: 10px;
}

/* form表单 */
.custom-select .el-input__inner {
    width: 140px;
}

/* header */
.bg-purple-dark {
    background: #ffffff;
    margin-top: 25px;
    /* height: 100px; */
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    box-shadow: 0 4px 6px rgba(61, 61, 61, 0.1), 0 -4px 6px rgba(61, 61, 61, 0.1),
        -4px 0 6px rgba(61, 61, 61, 0.1), 2px 0 6px rgba(61, 61, 61, 0.1);
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>
